<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>网上书店</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<link rel="shortcut icon" href="./favicon.ico">
		<link rel="stylesheet" href="./style/login/base.css">
		<link rel="stylesheet" href="./style/login/normalize.css">
		<link rel="stylesheet" href="./style/login/index.css">
		<link rel="stylesheet" href="./plugins/element-ui/index.css">
	</head>
	<body>
		<div id="app">
			<!-- 项部导航 -->
			<div class="xtx_topnav">


				<span class="span1" v-if="is_login" @click="logout">
					退出登录
				</span>


				<div class="wrapper">
					<!-- 顶部导航 -->
					<ul class="xtx_navs">
						<li v-if="!is_login">
							<a href="./pages/login/register.html">免费注册</a>
						</li>
						<li v-if="!is_login">
							<a href="./pages/login/login.html">请先登录</a>
						</li>
						<li v-else>
							<a href="#">{{username}}</a>
						</li>
						<li>
							<a href="javascript:;">我的订单</a>
						</li>
						<li>
							<a href="javascript:;">会员中心</a>
						</li>
						<li>
							<a href="javascript:;">帮助中心</a>
						</li>
						<li>
							<a href="javascript:;">在线客服</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 头部 -->
			<div class="xtx_header clearfix">
				<div class="wrapper">
					<!-- 网站Logo -->
					<h1 class="xtx_logo"><a href="/">网上书店</a></h1>
					<!-- 主导航 -->
					<div class="xtx_navs">
						<ul class="clearfix">
							<li v-for="(item,index) in categorys">
								<a @click="toMoreCategory(item)">{{item.name}}</a>
							</li>

						</ul>
					</div>
					<!-- 站内搜索 -->
					<div class="xtx_search clearfix">
						<!-- 购物车 -->
						<a href="./pages/cart/shoppingCart.html" class="xtx_search_cart sprites">
							<i>0</i>
						</a>
						<!-- 搜索框 -->
						<div class="xtx_search_wrapper">
							<input type="text" placeholder="搜一搜" v-model="search_content" @keyup.enter='searchBook'>
						</div>
					</div>
				</div>
			</div>
			<!-- 分类及焦点图 -->
			<div class="xtx_entry">
				<div class="wrapper">
					<!-- 分类 -->
					<div class="xtx_category">
						<!-- 顶级分类 -->
						<ul class="xtx_category_super">
							<li v-for="(item,index) in categorys" @click="toMoreCategory(item)">
								<a style="text-align:center;">{{item.name}}</a>
								<i class="sprites"></i>
							</li>
						</ul>
						<!-- 子分类 -->
						<div class="xtx_category_subset">
						</div>
					</div>
					<!-- 轮播图 -->

					<div class="xtx_banner">
						<ul>
							<template>
								<el-carousel trigger="click" :interval="5000" arrow="always" height="500px">
									<el-carousel-item v-for="item in 4" :key="item">
										<li>
											<a>
												<img :src="'images/desktop_' + item + '.jpg'" alt="">
											</a>
										</li>
									</el-carousel-item>
								</el-carousel>
							</template>
						</ul>
					</div>
				</div>
			</div>
			<!-- 新鲜好书 -->
			<div class="xtx_goods_new xtx_panel">
				<div class="wrapper">
					<!-- 面板头部 -->
					<div class="xtx_panel_header">
						<h3>新鲜好书<small>书单推荐 品质靠谱</small></h3>
						<a style="cursor: pointer;" class="more" href="#" @click="toMoreFresh">
							查看全部<i class="sprites"></i>
						</a>
					</div>
					<!-- 书名列表 -->
					<div class="xtx_panel_goods_1">
						<!-- v-for 循环渲染新书推荐 -->
						<a href="javascript:;" v-for="item in goodBooks">
							<img :src=`http:${item.imageName}` alt="">
							<p class="name">{{item.name}}</p>
							<span class="name1">
								{{item.author}}&nbsp;&nbsp;&nbsp;&nbsp;
								<span class="name2">{{item.publisher}}</span>
							</span>
							<span class="price"><small>￥</small>{{item.price}}</span>
						</a>
					</div>
				</div>
			</div>
			<!--低价专区 -->
			<div class="xtx_goods_seckill xtx_panel">
				<div class="wrapper clearfix">
					<!-- 面板头部 -->
					<div class="xtx_panel_header">
						<h3>低价专区<small>每日精品 限时低价</small></h3>
						<a href="javascript:;" class="more" @click="toMoreLower">
							查看全部<i class="sprites"></i>
						</a>
					</div>
					<!-- 倒计时 -->
					<div class="countdown">
						<p class="next">下一场 8:00开始</p>
						<p class="title">书城限时抢购</p>
						<p class="tips">18:00<small>点场 倒计时</small></p>
						<p class="clock">
							<span>00</span>
							<i>:</i>
							<span>25</span>
							<i>:</i>
							<span>20</span>
						</p>
					</div>
					<!-- 商品列表 -->
					<ul class="xtx_goods">
						<li v-for="item in lowPriceBooks">
							<a href="javascript:;">
								<div class="img-box">
									<img :src="item.imageName">
								</div>
								<p class="name"
									style="width: 80%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 20px auto">
									{{item.name}}
								</p>

								<p class="price" style="color: red">
									<span><small>￥</small>{{(item.discountRate*item.price).toFixed(2)}}</span>
									<span style="text-decoration: line-through"><small>￥</small>{{item.price}}</span>
								</p>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<!-- 公共底部 -->
			<div class="xtx_footer">
				<div class="wrapper">
					<!-- 联系我们 -->
					<div class="contact clearfix">
						<dl>
							<dt>客户服务</dt>
							<dd class="chat">在线客服</dd>
							<dd class="feedback">问题反馈</dd>
						</dl>
						<dl>
							<dt>关注我们</dt>
							<dd class="weixin">公众号</dd>
							<dd class="weibo">微博</dd>
						</dl>
						<dl>
							<dt>下载APP</dt>
							<dd class="qrcode">
								<img src="./uploads/qrcode.jpg">
							</dd>
							<dd class="download">
								<span>扫描二维码</span>
								<span>立马下载APP</span>
								<a href="javascript:;">下载页面</a>
							</dd>
						</dl>
						<dl>
							<dt>服务热线</dt>
							<dd class="hotline">
								400-0000-000
								<small>周一至周日 8:00-18:00</small>
							</dd>
						</dl>
					</div>
				</div>
				<!-- 其它 -->
				<div class="extra">
					<div class="wrapper">
						<!-- 口号 -->
						<div class="slogan">
							<a href="javascript:;" class="price">价格亲民</a>
							<a href="javascript:;" class="express">品质保障</a>
							<a href="javascript:;" class="quality">物流快捷</a>
						</div>
						<!-- 版权信息 -->
						<div class="copyright">
							<p>
								<a href="javascript:;">关于我们</a>
								<a href="javascript:;">帮助中心</a>
								<a href="javascript:;">售后服务</a>
								<a href="javascript:;">配送与验收</a>
								<a href="javascript:;">商务合作</a>
								<a href="javascript:;">搜索推荐</a>
								<a href="javascript:;">友情链接</a>
							</p>
							<p>CopyRight &copy; 小兔鲜儿</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

<script type="text/javascript" src="./plugins/jQuery/jquery-3.6.0.js"></script>
<script src="./js/vue.min.js"></script>
<script type="text/javascript" src="./js/axios.min.js"></script>
<script type="text/javascript" src="./js/request.js"></script>
<script src="./plugins/element-ui/index.js"></script>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				categorys: [],
				goodBooks: [],
				lowPriceBooks: [],
				username: '',
				is_login: false,
				search_content: ''
			}
		},
		methods: {
			// 获取到分类信息
			loadCategoryData(limit) {
				axios({
					method: 'get',
					url: 'http://localhost:9000/category/' + limit
				}).then(resp => {
					this.categorys = resp.data.data
				})
			},
			// 获取到最新图书
			loadFreshBook(number) {
				axios({
					method: 'get',
					url: 'http://localhost:9000/book/fresh/' + number
				}).then(resp => {
					this.goodBooks = resp.data.data
				})
			},
			// 获取到低价专区图书
			loadLowerBook(number) {
				axios({
					method: 'get',
					url: 'http://localhost:9000/book/lower/' + number
				}).then(resp => {
					this.lowPriceBooks = resp.data.data
				})
			},
			toMoreFresh() {
				sessionStorage.setItem('type', '1')
				sessionStorage.setItem('type_name', '新鲜好书')
				location.href = 'pages/more/more.html'
			},
			toMoreLower(){
				sessionStorage.setItem('type', '4')
				sessionStorage.setItem('type_name', '低价专区')
				location.href = 'pages/more/more.html'
			},
			toMoreCategory(row) {
				sessionStorage.setItem('type', '2')
				sessionStorage.setItem('type_name', row.name)
				sessionStorage.setItem('category_id', row.id)
				location.href = 'pages/more/more.html'
			},
			searchBook() {
				sessionStorage.setItem('type', '3')
				sessionStorage.setItem('type_name', this.search_content)
				location.href = 'pages/more/more.html'
			},
			// 检索用户是否登陆了
			isLogin() {
				let token = localStorage.getItem('token')
				if (token === null || token === undefined) {
					this.is_login = false
					return
				}
				axios({
					url: 'http://localhost:9000/user/is_login',
					headers: {
						token: token
					}
				}).then(resp => {
					if (resp.data.success) {
						this.is_login = true
						this.username = resp.data.data
						return
					}
					this.is_login = false
				}).catch(e => {
					this.is_login = false
				})
			},
			logout() {
				this.$confirm('你确定要登出么, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios({
						url: 'http://localhost:9000/user/logout',
						headers: {
							token: localStorage.getItem('token')
						}
					}).then(resp => {
						if (resp.data.success) {
							this.$message({
								type: 'success',
								message: '登出成功!'
							});
							this.is_login = false
							this.username = ''
							localStorage.removeItem('token')
							return
						}
						this.$message({
							type: 'error',
							message: '登出失败!'
						});
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消登出'
					});
				});
			}

		},
		created() {
			this.loadCategoryData(8)
			this.loadFreshBook(5)
			this.loadLowerBook(4)
			this.isLogin()

		}
	})
</script>